<!--
 * @Author: 曹捷
 * @Date: 2020-11-14 00:51:36
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-12-13 22:21:27
 * @Description: 自定义confirm框
-->
<template>
  <uni-popup :ref="createKey" type="dialog" @change="change">
    <div class="call-dialog">
      <div class="title flex-l pd" v-if="title">
        <span class="color-f-tit">{{ leftName }}</span>
        <span class="color-f-tip" @click="reset">
          <i class="iconfont " :class="rightIcon"></i>
          {{rightName}}
        </span>
      </div>
      <div class="pd">
        <slot></slot>
      </div>
      <div class="foot-btn flex ">
        <div class="flex1 t-c" @click="close">
          {{cancel}}
        </div>
        <div class="center flex-a"></div>
        <div class="flex1 t-c color-acitve" @click="confirm">
          {{conform}}
        </div>
      </div>
    </div>
  </uni-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: Boolean,
      default: true
    },
    leftName: {
      type: String,
      default: '提示'
    },
    rightName: {
      type: String,
      default: '清除'
    },
    rightIcon: {
      type: String,
      default: 'icon-delete'
    },
    conform: {
      type: String,
      default: '确定'
    },
    cancel: {
      type: String,
      default: '取消'
    }
  },
  watch: {
    visable (value) {
      if (value) {
        this.$refs
      }
    }
  },
  data () {
    return {
      createKey: ''
    }
  },
  methods: {
    reset () {
      this.$emit('remove')
    },
    open (option = {}) {
      this.$refs[this.createKey].open()
    },
    close () {
      this.$refs[this.createKey].close()
      this.$emit('close')
    },
    change (e) {
      if (!e.show) {
        this.$emit('close')
      }
    },
    confirm () {
      this.$emit('confirm', this.close)
    }
  },
  created () {
    this.createKey = Math.random() * 1000;
  },
}
</script>

<style lang="scss">
.call-dialog {
  width: 640rpx;
  background: #fff;
  border-radius: 16rpx;
  .foot-btn {
    height: 110rpx;
    line-height: 110rpx;
    font-size: 34rpx;
    border-top: 2rpx solid rgba(0, 0, 0, 0.1);
    .center {
      width: 2rpx;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
      position: relative;
    }
  }
  .iconfont {
    padding-right: 6rpx;
    font-size: 28rpx;
  }
  .title {
    height: 88rpx;
    line-height: 88rpx;
  }
  .pd {
    padding: 0 32rpx;
  }
}
</style>